﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShowWidgetWithAJAX.aspx.cs" Inherits="JQueryWidget.WidgetFrame.ShowWidgetWithAJAX" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title></title>
    <style type="text/css">
    .widgetStore
    {
    }
    .column
    {
        margin:0px 0px 0px 0px;
        width:33%;
        display:block;
        float:left;
        position:relative; 
        height:800px;
    }
    .modbox
    {
        margin:0px 0px 0px 0px;
    }
    .widget
    { 
        border:1px solid gray;
        margin-top:10px;
    }
    .widget_header
    {
        background-color:lightblue;
    }
    .widget_body
    {
    }
    .widget_footer
    {
    }
    
    .draggable
    {
    }
    .droppable
    {
    }
    .widgetholder
    {
        border:2px dashed gray;
        display:none;
        position:relative;
        margin-top:10px;
    }
    
    .widgetholder1
    {
        border:2px dashed gray; 
        position:relative;
        margin-top:10px;
        height:40px;
    }
    .toolbox
    { 
        float:right;
        border:1px solid gray; 
        position:absolute;
        z-index:100;
        right:0px;
        top:10px;
        
    }
    .toolbox_title
    {
        background-color:lightblue;
    }
    .toolbox_body
    { 
    }
    .additem
    {
    }
    
    .widgetSample
    {
        display:none;
    }
    
    .widgetedit
    {
        float:right;
        display:none;
    }
    .displaynone
    {
        display:none;
    }
    .widgetdownpanel
    {
        display:none;
        position:absolute;
    }
    .widgetdownpanel a
    {
        display:block;
    }
    </style>
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" language="javascript" src="Scripts/jquery-ui.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    
    <div class="toolbox displaynone">
        <div class="toolbox_title">
            Tool Box
        </div>
        <div class="toolbox_body" >
           <%-- <div>
                <a class="additem" widgettype="Calendar">Calendar</a>
            </div>
            <div>
                <a class="additem" widgettype="RSS">RSS</a>
            </div>--%>
        </div>
    </div>
    <div class="widgetStore">
        <div class="column droppable">
            <div class="widget draggable">
                <div class="widget_header">
                    <span class="widgettitle">Calendar</span>
                    <div class="widgetedit" >
                        <a style="padding-top:2px;"><img alt="editpanel" src="Images/collapsed_toggleExpandHover.gif"/></a>
                    </div>
                </div>
                <div class="widget_body">
                    <iframe src="Widgets/CalendarWidgetPage.aspx" marginheight="0" marginwidth="0" frameborder="0" height="200px" width="100%"  scrolling="auto"></iframe>
                </div>
                <div class="widget_footer">
                </div>
            </div>  

        </div>
        <div class="column droppable">
                          
        </div>
        <div class="column droppable">
         
        </div>
    </div>

    <div class="widgetholder">
        widgetholder
    </div> 
    <div class="widget draggable widgetSample">
        <div class="widget_header">            
            <span class="widgettitle">&nbsp;</span>
            <a class="widgetedit"  href="#">Edit</a>
        </div>
        <div class="widget_body">
            <iframe marginheight="0" marginwidth="0" frameborder="0" height="200px" width="100%"  scrolling="auto"></iframe>
        </div>
        <div class="widget_footer">
        </div>
    </div> 
    
    <div class="widgetdownpanel">
        <a>Minimize</a>
        <a>Close</a>
        <a>Edit Widget</a>
    </div> 
    <script type="text/javascript" language="javascript">

        $(document).ready(function () {
            $(".column").sortable({
                placeholder: "widgetholder1",
                connectWith: ".column"
            });
            $(".widget").hover(function () { $(this).find(".widgetedit").show(); }, function () { $(this).find(".widgetedit").hide(); });
            $(".widget .widgetedit a").click(function () {
                var offset = $(this).offset();
                $(".widgetdownpanel").css("display", "block")
                                     .css("right", ($(document).width() - (offset.left + $(this).width())) + "px")
                                     .css("top", (offset.top + $(this).height()) + "px");
            });
            $(document).click(function (event) {
                if (event.target != $(".widget .widgetedit a img")[0]) {
                    $(".widgetdownpanel").hide();
                } 
            });
            loadToolBox();
        });

        function loadToolBox() {
            var toolboxHtml = $(".toolbox").data("toolboxhtml");
            if (typeof (toolboxHtml) == "undefined") {
                $.get("AJAXFunc.aspx",
                    { method: "getWidgets" },
                    function (json) {
                        $(".toolbox > .toolbox_body").html("");
                        $(eval(json)).each(function (i, n) {
                            var anchor = $('<a></a>').addClass("additem").attr("widgettypeid", n.ID).html(n.Title);
                            $("<div></div>").append(anchor).appendTo(".toolbox > .toolbox_body");
                        });
                        toolboxHtml = $(".toolbox").data("toolboxhtml");
                        initializeToolBox(toolboxHtml);
                    }
                );
            }
            else {
                initializeToolBox(toolboxHtml);
            }
        }

        function initializeToolBox(_toolboxHtml) {
            $(".toolbox").css("display", "block").html(_toolboxHtml);
//            $(".toolbox_body").sortable({
//                placeholder: "widgetholder1",
//                connectWith: ".column",
//                helper: 'clone',
//                start: function (event, ui) {
//                },
//                update: function (event, ui) {
//                    var widget = createNewWidget($(ui.item).children("a").attr("widgettypeid"));
//                    $(ui.item).replaceWith(widget);

//                    //Save relative states

//                    loadToolBox();
//                }
            //            });
            $(".toolbox_body div").draggable(
            {
                connectToSortable: ".column",
                helper:"clone"
            }
            );
        }

        function createNewWidgetWithIFrame(widgetTypeid) {
            var newWidget = $(".widgetSample").clone(true).removeClass("widgetSample");
            $.get("AJAXFunc.aspx", { method: "getWidget", id: widgetTypeid }, function (data) {
                newWidget.find(".widget_header > .widgettitle").text((eval("(" + data + ")")).Title);
            });

            var newIframe = newWidget.children(".widget_body").children("iframe");
            newIframe.attr("src", "LoadWidget.aspx?typeid=" + widgetTypeid);
            return newWidget;
        }

        function createNewWidgetWithAJAX(widgetTypeid) {
            var newWidget = $(".widgetSample").clone(true).removeClass("widgetSample");
            $.get("AJAXFunc.aspx", { method: "getWidget", id: widgetTypeid }, function (data) {
                newWidget.find(".widget_header > .widgettitle").text((eval("(" + data + ")")).Title);
            });

            $.get("LoadWidget.aspx?typeid=" + widgetTypeid + "", function (data) {
                var fDoc = newWidget.children(".widget_body").children("iframe")[0].contentDocument;
                fDoc.clear();
                fDoc.write(data);
                newWidget.children(".widget_body").children("iframe").load(function () {
                    var frameDoc = $(this)[0].contentDocument;
                    frameDoc.clear();
                    frameDoc.write(data);
                });
            });
            return newWidget;
        }
        var createNewWidget = createNewWidgetWithAJAX;
    </script>
    </form>
</body>
</html>
